<div class="comment-form-container">
  <%= if @minimized do %>
    <div class="field is-grouped">
      <div class="control is-expanded">
        <%= tag :input, type: "text", class: "input", readonly: true, phx_focus: "expand", phx_target: @myself %>
      </div>
      <%= render_block(@inner_block, minimized: true, changeset: @changeset) %>
    </div>
  <% else %>
    <header class="tabs is-boxed">
      <ul>
        <li class={if @tab == :editor, do: "is-active"} phx-click="switch_tab", phx-value-tab="editor" phx-target={@myself}>
          <a>Write</a>
        </li>
        <li class={if @tab == :preview, do: "is-active"} phx-click="switch_tab", phx-value-tab="preview" phx-target={@myself}>
          <a>Preview</a>
        </li>
      </ul>
    </header>
    <%= if f = assigns[:form] do %>
      <div class="field">
        <%= case @tab do %>
          <% :editor -> %>
            <div class="control"><%= textarea f, :body, class: "textarea", autofocus: @autofocus %></div>
            <%= error_tag f, :body %>
          <% :preview -> %>
            <%= hidden_input f, :body %>
            <div class="comment-preview"><div class="content"><%= @markdown_preview %></div></div>
        <% end %>
      </div>
    <% else %>
      <.form let={f} for={@changeset} id="comment-form" phx_hook="CommentForm" {@form_opts}>
        <div class="field">
          <%= case @tab do %>
            <% :editor -> %>
              <div class="control"><%= textarea f, :body, class: "textarea", autofocus: @autofocus %></div>
              <%= error_tag f, :body %>
            <% :preview -> %>
              <%= hidden_input f, :body %>
              <div class="comment-preview"><div class="content"><%= @markdown_preview %></div></div>
          <% end %>
        </div>
        <div class="field is-grouped is-grouped-right">
          <%= render_block(@inner_block, minimized: false, tab: @tab, changeset: @changeset) %>
        </div>
      </.form>
    <% end %>
  <% end %>
</div>